<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px">
    <el-form-item label="部门：" prop="departmentId">
      <el-select v-model="ruleForm.departmentId" @change="getJiaban">
        <el-option
          v-for="item in deptsList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="加班规则：">
      <el-row v-for="item in ruleForm.rule" :key="item.rule">
        <el-col :span="12">
          <el-switch
            v-model="item.isTimeOff"
            style="margin-right:10px"
          />
          <span>{{ item.rule }}</span>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="item.isEnable">调休假</el-checkbox>
          <el-time-select
            v-model="item.ruleStartTime"
            style="width:100px;margin-left:5px"
            :disabled="!item.isEnable"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30'
            }"
          />
          <el-time-select
            v-model="item.ruleEndTime"
            style="width:100px;margin-left:5px"
            :disabled="!item.isEnable"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              minTime: item.ruleStartTime
            }"
          />
        </el-col>
      </el-row>
      <!-- <el-row>
          <el-col :span="12">
            <el-switch
              v-model="value"
              style="margin-right:10px"
            />
            <span>休息日可申请加班</span>
          </el-col>
          <el-col :span="12">
            <el-checkbox v-model="checked">调休假</el-checkbox>
            <el-time-select
              v-model="startTime"
              style="width:100px;margin-left:5px"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
              }"
            />
            <el-time-select
              v-model="endTime"
              style="width:100px;margin-left:5px"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
                minTime: startTime
              }"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-switch
              v-model="value"
              style="margin-right:10px"
            />
            <span>法定节假日可申请加班</span>
          </el-col>
          <el-col :span="12">
            <el-checkbox v-model="checked">调休假</el-checkbox>
            <el-time-select
              v-model="startTime"
              style="width:100px;margin-left:5px"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
              }"
            />
            <el-time-select
              v-model="endTime"
              style="width:100px;margin-left:5px"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
                minTime: startTime
              }"
            />
          </el-col>
        </el-row> -->
    </el-form-item>
    <el-form-item label="打卡验证：" prop="isClock">
      <el-switch v-model="ruleForm.isClock" style="margin-right:10px" />
      <span>加班需要有打卡记录</span>
    </el-form-item>
    <el-form-item label="开启补偿：" prop="isCompensationint">
      <el-switch v-model="ruleForm.isCompensationint" />
    </el-form-item>

    <el-form-item label="调休假设置：" required>
      <el-row>
        <el-col :span="5">
          <span>最晚有效期：次年</span>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="latestEffectDate">
            <el-date-picker v-model="ruleForm.latestEffectDate" type="date" placeholder="选择日期" style="width: 150px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label prop="unit">
          <div>
            <p>
              请假最小单位
              <el-input v-model="ruleForm.unit" style="width:50px" />天
            </p>
          </div>
        </el-form-item>
      </el-row>

    </el-form-item>
    <el-row type="flex" justify="center" style="margin: 15px 0">
      <el-button type="primary" @click="btnOk">保存更新</el-button>
      <el-button @click="btnCancel">取消</el-button>
    </el-row>
  </el-form>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { getJiaban, settingJiaban } from '@/api/attendance'
import attendanceEnum from '@/api/constant/attendance'
export default {
  data() {
    return {
      ruleForm: {
        departmentId: '1175310929766055936',
        isClock: false, // 开启打卡验证
        isCompensationint: false, // 开启补偿
        latestEffectDate: '', // 次年
        unit: '', // 调休单位
        rule: attendanceEnum.overtimeType
      },
      deptsList: [],
      rules: {
        departmentId: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '调休单位不能为空', trigger: 'blur' }
        ],
        isClock: [
          { required: true, message: '请选择打卡验证', trigger: 'change' }
        ],
        isCompensationint: [
          { required: true, message: '请选择补偿', trigger: 'change' }
        ],
        latestEffectDate: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getDepartments()
    this.getJiaban()
  },
  methods: {
    async getDepartments() {
      const { depts } = await getDepartments()
      console.log(depts)
      this.deptsList = depts
    },
    async getJiaban(val) {
      this.ruleForm = {
        departmentId: val,
        isClock: false, // 开启打卡验证
        isCompensationint: false, // 开启补偿
        latestEffectDate: '', // 次年
        unit: '', // 调休单位
        rule: attendanceEnum.overtimeType
      }
      const fd = new FormData()
      fd.append('departmentId', val)
      const { dayOffConfigs, extraDutyConfig, extraDutyRuleList } = await getJiaban(fd)
      console.log(dayOffConfigs, extraDutyConfig, extraDutyRuleList)
      if (dayOffConfigs !== null) {
        this.ruleForm.latestEffectDate = dayOffConfigs.latestEffectDate
        this.ruleForm.unit = dayOffConfigs.unit
      }
      if (extraDutyConfig !== null) {
        this.ruleForm.isClock = extraDutyConfig.isClock
        if (this.ruleForm.isClock === 0) {
          this.ruleForm.isClock = true
        } else {
          this.ruleForm.isClock = false
        }
        this.ruleForm.isCompensationint = extraDutyConfig.isCompensationint
        if (this.ruleForm.isCompensationint === 0) {
          this.ruleForm.isCompensationint = true
        } else {
          this.ruleForm.isCompensationint = false
        }
      }
      if (extraDutyRuleList.length > 0) {
        this.ruleForm.rule = extraDutyRuleList
      }
    },
    btnCancel() {
      console.log(111)
      this.ruleForm.departmentId = '1175310929766055936'
      this.getJiaban('1175310929766055936')
      this.$emit('updateShowDialog')
    },
    async btnOk() {
      if (this.ruleForm.isClock) {
        this.ruleForm.isClock = 0
      } else {
        this.ruleForm.isClock = 1
      }

      if (this.ruleForm.isCompensationint) {
        this.ruleForm.isCompensationint = 0
      } else {
        this.ruleForm.isCompensationint = 1
      }
      await settingJiaban(this.ruleForm)
      this.$message.success('操作成功')
      this.btnCancel()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep label {
  font-weight: 400;
}
::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}
</style>
